<template>
	<view>
		<view class="container">
			<!-- 选择板块分区 -->
			<view class="class-wrap">
				<view class="title">板块分区</view>
				<scroll-view scroll-x style="width: calc(100vw - 180rpx)">
					<view class="class-list">
						<view
							class="class-item"
							:class="index == classIndex ? 'class-active' : ''"
							@click="chooseClass(item, index)"
							v-for="(item, index) in calssList"
							:key="index"
						>
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
			</view>
			<textarea
				placeholder="这一刻的想法..."
				@blur="inputBlur"
				:focus="inputFocus"
				:auto-height="true"
				:show-confirm-bar="false"
				maxlength="-1"
				v-model="form.content"
				class="post-txt"
			></textarea>
			<!-- 上传媒体 -->
			<q-upload ref="ossUpload" @success="onSubmit"></q-upload>
		</view>
		<!-- 工具栏 -->
		<view class="tool-wrap" :style="[toolStyle]">
<!-- 			<view @click="showDiscuss = true" class="tool-item" style="white-space: nowrap">
				<image class="icon" src="/static/discuss.png"></image>
				<text class="txt">选择话题</text>
			</view> -->

			<!-- 所在位置 -->
			<view @click="chooseLocation" class="tool-item">
				<u-icon name="map-fill" size="30rpx"></u-icon>
				<text class="txt u-line-1">{{ form.address || '位置' }}</text>
			</view>
			<view @click="onUpload" class="submit-btn">发布</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			toolStyle: {},
			mediaList: [],
			form: {
				title: '',
				topic_id: '',
				class_id: '',
				content: '',
				media: [],
				longitude: 0,
				latitude: 0,
				address: ''
			},
			showDiscuss: false,
			discussList: [],
			inputCursor: 0,
			inputFocus: true,
			inputDiscussName: '',
			calssList: [],
			classIndex: null,
			page: 1,
			topicId: null
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		}
	},
	onLoad(options) {
		this.topicId = options.topic_id;

		if (options.dis_id) {
			this.form.discuss_id = options.dis_id;
		}

		let location = uni.getStorageSync('location_info');
		this.form.longitude = location.longitude;
		this.form.latitude = location.latitude;

		this.onKeyboardChange();
		this.getTopicClass();
	},
	onShow() {
		if (!this.userInfo) {
			uni.navigateTo({
				url: '/pages/user/login'
			});
		}
	},
	methods: {
		chooseClass(e, index) {
			this.classIndex = index;
			this.form.class_id = e.id;
		},
		getTopicClass() {
			this.$H
				.get('topic/postClassList', {
					topic_id: this.topicId
				})
				.then((res) => {
					this.calssList = res.result;
				});
		},
		onSubmit(e) {
			let that = this;
			let fileList = [];
			e.forEach((item) => {
				if (item.url) {
					fileList.push(item.url);
				}
			});

	
			this.form.content = this.form.content.replace(/#(.*?)#/g, '');

			this.form.media = fileList;
			this.form.topic_id = this.topicId;

			this.$H.post('post/release', this.form).then((res) => {
				if (res.code === 1) {
					// #ifdef MP-WEIXIN
					wx.requestSubscribeMessage({
						tmplIds: [that.$c.replyTmplId],
						complete() {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					});
					// #endif

					// #ifdef H5
					uni.reLaunch({
						url: '/pages/index/index'
					});
					// #endif

					this.$H.post('post/checkPostImg', {
						post_id: res.result.id
					});
				}
				uni.hideLoading();
			});
		},
		inputBlur(event) {
			this.inputCursor = event.detail.cursor;
			this.inputFocus = false;
		},
		chooseDiscuss(e) {
			let discussText = '  #' + e.title + '#  ';
			let contentText = this.form.content;

			this.form.content = discussText + contentText;

			this.showDiscuss = false;
			this.inputFocus = true;
			this.inputDiscussName = '';
		},
		getDiscussList(keyword) {
			let form = {
				page: this.page
			};

			if (keyword) {
				form.keyword = keyword;
			}

			this.$H.get('discuss/list', form).then((res) => {
				this.discussList = res.result.data;

				if (res.result.data.length == 0) {
					if (keyword) {
						this.discussList.push({
							title: keyword
						});
					}
				}
			});
		},
		closePopup() {
			this.showDiscuss = false;
			this.inputDiscussName = '';
		},
		onUpload() {
			if (!this.form.content) {
				this.$u.toast('内容不能为空');
				return;
			}

			this.$refs.ossUpload.upload();

			uni.showLoading({
				mask: true,
				title: '发布中'
			});
		},
		chooseLocation() {
			let that = this;
			uni.chooseLocation({
				success: function (res) {
					// console.log('位置名称：' + res.name);
					// console.log('详细地址：' + res.address);
					// console.log('纬度：' + res.latitude);
					// console.log('经度：' + res.longitude);
					that.form.address = res.name;
					that.form.latitude = res.latitude;
					that.form.longitude = res.longitude;
				}
			});
		},
		onKeyboardChange() {
			uni.onKeyboardHeightChange((res) => {
				this.toolStyle = {
					bottom: res.height + 'px'
				};
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.post-txt {
	width: 100%;
	padding: 20rpx 0;
	min-height: 300rpx;
}

.choose-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1px solid #f5f5f5;

	&:last-child {
		border: 0;
	}

	.txt {
		margin-left: 20rpx;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
	}

	.icon-right {
		margin-left: 0;
	}
}

.tool-wrap {
	display: flex;
	background-color: #f5f5f5;
	padding: 30rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9;

	.tool-item {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		font-size: 28rpx;
		padding: 10rpx 20rpx;
		line-height: 1;
		border-radius: 100rpx;
		margin-right: 10rpx;

		.icon {
			width: 30rpx;
			height: 30rpx;
			display: block;
		}

		.txt {
			margin-left: 10rpx;
		}
	}

	.submit-btn {
		margin-left: auto;
		font-size: 28rpx;
		background-color: $themes-color;
		padding: 20rpx 40rpx;
		border-radius: 100rpx;
		line-height: 1;
		white-space: nowrap;
		color: #fff;
	}
}

.discuss-popup {
	min-height: 70vh;
	padding-top: 50rpx;

	.dis-wrap {
		margin: 30rpx;

		.dis-prefix-icon {
			color: #999;
			font-weight: bold;
			margin: 0 20rpx;
		}
	}

	.discuss-item {
		margin: 30rpx;
		font-weight: bold;
	}
}

.class-wrap {
	display: flex;
	margin: 30rpx 0;

	.title {
		font-size: 28rpx;
		color: #999;
		margin-right: 20rpx;
		white-space: nowrap;
	}

	.class-list {
		display: flex;
		align-self: center;

		.class-item {
			margin-right: 20rpx;
			background-color: #eee;
			font-size: 24rpx;
			line-height: 1;
			padding: 10rpx 20rpx;
			border-radius: 100rpx;
			white-space: nowrap;
		}

		.class-active {
			background-color: $themes-color;
			color: #fff;
		}
	}
}
</style>
